<template>
  <div  style="margin-top: 20px">
    <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[2, 5, 10, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const total=ref(1000)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  pageNum.value =1
  pageSize.value=val
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  pageNum.value=val
}
</script>


<style scoped>

</style>